import React, { useState } from "react";
import {
  Box,
  Input,
  InputLeftAddon,
  InputGroup,
  FormControl,
  FormHelperText,
  Stack,
  Button,
  Text,
} from "@chakra-ui/react";
import { FaUserAlt, FaLock } from "react-icons/fa";
import { AiFillWarning, AiTwotoneMail } from "react-icons/ai";
import { useFormik } from 'formik'
import * as Yup from 'yup'
import axios from 'axios'
import Footer from "./Footer";

export default function SignUp() {
  const [loading, setLoading] = useState(false)
  const formik = useFormik({
    initialValues: {username: "", email: "", password: ""},
    validationSchema: Yup.object({
      username: Yup.string()
        .required('请输入昵称')
        .matches(/^[0-9a-zA-Z_]{3,}$/, '三位以上数字字母下划线'),
      email: Yup.string().email('请输入正确邮箱').required('请输入邮箱'),
      password: Yup.string().min(6, '最少6位').required('请设置密码')
    }),
    onSubmit: async values => {
      setLoading(true)
      await axios.post('https://conduit.productionready.io/users', {
        user: {
          username: values.username,
          email: values.email,
          password: values.password
        }
      })
      setLoading(false)
    }
  })
  return (
    <form>
      <InputGroup>
        <InputLeftAddon
          px="10px"
          borderRight="none"
          h="50px"
          children={<FaUserAlt color={"#969696"} />}
          bgColor="#f1f1f1"
          borderBottomLeftRadius="0px"
        />
        <Input
          h="50px"
          pl="0"
          py="4px"
          position="relative"
          borderLeft="none"
          _focus={{ boxShadow: "none" }}
          placeholder="你的昵称"
          bgColor="#f1f1f1"
          borderBottomRightRadius="0px"
          autoComplete="off"
          {...formik.getFieldProps('username')}
        />
        <FormControl
          display={formik.touched.username && formik.errors.username ? 'block' : 'none'}
          borderColor="tomato"
          w="280px"
          textAlign="center"
          borderRadius="4px"
          border="1px solid #ea6f5a"
          py="3px"
          px="10px"
          position="absolute"
          left="315px"
          top="5px"
          bgColor="#fff"
        >
          <Box
            position="absolute"
            borderTop="1px solid #ea6f5a"
            borderLeft="1px solid #ea6f5a"
            bgColor="#fff"
            w="10px"
            h="10px"
            transform="rotate(-45deg)"
            top="12px"
            left="-6px"
          ></Box>
          <Stack direction="horizontal" align="center">
            <AiFillWarning color={"#ea6f5a"} fontSize="26px" />
            <FormHelperText
              w="100%"
              mt="0px"
              color="#333"
              fontSize="14px"
              py="5px"
            >
              {formik.errors.username ? formik.errors.username : ''}
            </FormHelperText>
          </Stack>
        </FormControl>
      </InputGroup>
      <InputGroup>
        <InputLeftAddon
          borderRadius="0px"
          px="10px"
          borderRight="none"
          h="50px"
          children={<AiTwotoneMail color={"#969696"} />}
          bgColor="#f1f1f1"
        />
        <Input
          h="50px"
          pl="0"
          py="4px"
          borderRadius="0px"
          position="relative"
          borderLeft="none"
          _focus={{ boxShadow: "none" }}
          placeholder="邮箱"
          bgColor="#f1f1f1"
          {...formik.getFieldProps('email')}
        />
        <FormControl
          display={formik.touched.email && formik.errors.email ? 'block' : 'none'}
          borderColor="tomato"
          w="280px"
          textAlign="center"
          borderRadius="4px"
          border="1px solid #ea6f5a"
          py="3px"
          px="10px"
          position="absolute"
          left="315px"
          top="5px"
          bgColor="#fff"
        >
          <Box
            position="absolute"
            borderTop="1px solid #ea6f5a"
            borderLeft="1px solid #ea6f5a"
            bgColor="#fff"
            w="10px"
            h="10px"
            transform="rotate(-45deg)"
            top="12px"
            left="-6px"
          ></Box>
          <Stack direction="horizontal" align="center">
            <AiFillWarning color={"#ea6f5a"} fontSize="26px" />
            <FormHelperText
              w="100%"
              mt="0px"
              color="#333"
              fontSize="14px"
              py="5px"
            >
              {formik.errors.email ? formik.errors.email : ''}
            </FormHelperText>
          </Stack>
        </FormControl>
      </InputGroup>
      <InputGroup>
        <InputLeftAddon
          borderTopLeftRadius="0px"
          px="10px"
          borderRight="none"
          h="50px"
          children={<FaLock color={"#969696"} />}
          bgColor="#f1f1f1"
        />
        <Input
          h="50px"
          pl="0"
          py="4px"
          borderTopRightRadius="0px"
          position="relative"
          borderLeft="none"
          _focus={{ boxShadow: "none" }}
          placeholder="设置密码"
          bgColor="#f1f1f1"
          autoComplete="off"
          type="password"
          {...formik.getFieldProps('password')}
        />
        <FormControl
          display={formik.touched.password && formik.errors.password ? 'block' : 'none'}
          borderColor="tomato"
          w="280px"
          textAlign="center"
          borderRadius="4px"
          border="1px solid #ea6f5a"
          py="3px"
          px="10px"
          position="absolute"
          left="315px"
          top="5px"
          bgColor="#fff"
        >
          <Box
            position="absolute"
            borderTop="1px solid #ea6f5a"
            borderLeft="1px solid #ea6f5a"
            bgColor="#fff"
            w="10px"
            h="10px"
            transform="rotate(-45deg)"
            top="12px"
            left="-6px"
          ></Box>
          <Stack direction="horizontal" align="center">
            <AiFillWarning color={"#ea6f5a"} fontSize="26px" />
            <FormHelperText
              w="100%"
              mt="0px"
              color="#333"
              fontSize="14px"
              py="5px"
            >
              {formik.errors.password ? formik.errors.password : ''}
            </FormHelperText>
          </Stack>
        </FormControl>
      </InputGroup>
      <Button
        mt="20px"
        w="100%"
        px="9px"
        py="18px"
        border="none"
        borderRadius="25px"
        color="#fff"
        bgColor="#42c02e"
        outline="none"
        _hover={{ bgColor: "#3db922" }}
        _focus={{ boxShadow: "none" }}
        _active={{ bgColor: "#3db922" }}
        onClick={formik.handleSubmit}
        disabled={loading}
      >
        {loading ? '注册中' : '注册'}
      </Button>
      <Text textAlign="center" fontSize="12px" color="#969696" my="10px">
        点击 “注册” 即表示您同意并愿意遵守简书
        <br />
        <Text as="a" color="#3194D0" href="#">
          用户协议
        </Text>
        和
        <Text as="a" href="#" color="#3194D0">
          隐私政策
        </Text>
        。
      </Text>
      <Footer />
    </form>
  );
}
